Layout Options

Add the following css classes to <div class="app"> to get different layouts

  • .layout-small-menu - collapses sidebar panel.
  • .layout-chat-open - chat panel is open by default on page reload.
  • .layout-fixed-header - main panel header is fixed on top.
  • .layout-boxed - activates boxed layout.
  • .layout-static-sidebar - static sidebar panel that scrolls with the rest of the page.
  • .layout-right-sidebar - sidebar panel on the right.
  • .layout-fixed-footer - main panel footer fixed at the bottom.

For angular you can change your default layout options from app.main.js

Toggle API (HTML version only)

Use data-toggle="layout-small-menu" to toggle small sidebar state on click e.g:

<a href="javascript:;" data-toggle="layout-small-menu"></a>

Use data-toggle="layout-chat-open" to toggle chat panel.

<a href="javascript:;" data-toggle="layout-chat-open"></a>

Use data-toggle="offscreen" to toggle the offscreen navigation. If you want to reveal the right sidebar navigation then use with data-move="rtl".

Note: Offscreen layout should be wrapped in either .offscreen-left for left positioned sidebar or .offscreen-right for right positioned.